<template>
  <div>
    <myPreview :preview="preview" :appendToBody="true"></myPreview>

    <el-upload
      :http-request="handelUpload"
      :action="'/manage/common/file/upload?module=' + module"
      class="myUpload"
      style="width: 100%"
      ref="upload"
      :multiple="multiple"
      :limit="limit"
      :on-exceed="handelUploadExceed"
      :on-preview="handlePreview"
      :accept="accept"
      :on-remove="handelRemove"
      :file-list="fileList"
      :auto-upload="autoUpload"
    >
      <el-button slot="trigger" style="width: 100%">
        <span>{{ '请上传附件' }}({{ accept || '*' }})类型,最多上传{{ limit }}个</span>
      </el-button>
    </el-upload>
  </div>
</template>

<script>
import myPreview from './myPreview'

export default {
  name: 'myUpload',
  components: { myPreview },
  props: {
    autoUpload: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: '.jpg,.png,.jepg'
    },
    module: {
      type: String,
      default: 'business'
    },
    fileList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data: function () {
    return {
      preview: {}
    }
  },
  methods: {
    //文件上传
    async handelUpload(param) {
      if (!Array.prototype.isPrototypeOf(this.fileList)) {
        this.fileList = []
      }
      let file = {
        uid: param.file.uid,
        name: param.file.name,
        type: param.file.type,
        url: '/manage/common/file/download?id='
      }
      let formData = new FormData()
      formData.append('files', param.file)
      let res = await this.$http.post('/manage/common/file/upload?module=' + this.module, formData)
      if (res.code === 4002) {
        file.id = res.data[0]
        file.url += res.data[0]
        this.fileList.push(file)
        let arr = []
        for (let i = 0; i < this.fileList.length; i++) {
          arr.push(this.fileList[i].id)
        }
        if (this.multiple) {
          this.$emit('uploadYes', arr.join(';'))
        } else {
          this.$emit('uploadYes', arr[0])
        }
      }
    },
    //文件超出上传个数
    handelUploadExceed() {
      this.$message({
        type: 'info',
        message: `最多上传${this.limit}个`
      })
    },
    //移除文件
    handelRemove(file) {
      var index = this.fileList.findIndex(items => items.id === file.id)
      this.fileList.splice(index, 1)
      let arr = []
      for (let i = 0; i < this.fileList.length; i++) {
        arr.push(this.fileList[i].id)
      }
      if (this.multiple) {
        this.$emit('uploadYes', arr.join(';'))
      } else {
        this.$emit('uploadYes', arr[0])
      }
    },
    //预览文件
    handlePreview(file) {
      if (file.id) {
        this.preview = { id: file.id, visible: true }
      } else {
        for (let i = 0; i < this.fileList.length; i++) {
          if (file.uid === this.fileList[i].uid) {
            this.preview = { id: this.fileList[i].id, visible: true }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
